import 'package:flutter/material.dart';
import 'package:meal/constant/sizes.dart';
import 'package:meal/utils/colors.dart';
import 'package:meal/utils/styles.dart';

class MarketDataAnalysis extends StatefulWidget {
  const MarketDataAnalysis({Key? key}) : super(key: key);

  @override
  State<MarketDataAnalysis> createState() => _MarketDataAnalysisState();
}

class _MarketDataAnalysisState extends State<MarketDataAnalysis> {
  List<String> types = ['今天', '昨天', '7日内', '30日内', '全部'];
  int index = 0;

  TextStyle get defaultStyle {
    return StylesUtils.customTextStyle(color: ColorsUtils.color515);
  }

  TextStyle get style {
    return StylesUtils.customTextStyle(color: ColorsUtils.colorCc0, fontSize: Sizes.default20);
  }

  TextStyle get grey {
    return StylesUtils.customTextStyle(color: ColorsUtils.color999, fontSize: Sizes.default13);
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          Container(
            margin: const EdgeInsets.all(Sizes.default20),
            height: Sizes.default30,
            decoration: BoxDecoration(
                color: Colors.white,
                border: Border.all(color: ColorsUtils.rgba(223, 87, 67, 1)),
                borderRadius: BorderRadius.circular(Sizes.default15)),
            child: Row(
              children: types
                  .asMap()
                  .map((key, value) => MapEntry(
                      key,
                      Expanded(
                        child: InkWell(
                          onTap: () {
                            setState(() {
                              index = key;
                            });
                          },
                          child: Container(
                              alignment: Alignment.center,
                              decoration: boxDecoration(key),
                              child: Text(
                                value,
                                style: StylesUtils.customTextStyle(
                                    fontSize: Sizes.default13,
                                    color: key == index ? ColorsUtils.colorWhite : '#DF5743'),
                              )),
                        ),
                      )))
                  .values
                  .toList(),
            ),
          ),
          Container(
            margin: const EdgeInsets.only(
                left: Sizes.default20, right: Sizes.default20, bottom: Sizes.default20),
            decoration: BoxDecoration(
                color: Colors.white, borderRadius: BorderRadius.circular(Sizes.default10)),
            padding:
                const EdgeInsets.symmetric(vertical: Sizes.default20, horizontal: Sizes.default15),
            child: ListBody(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text('活动订单数量', style: defaultStyle),
                    Text('活动订单净收入', style: defaultStyle),
                  ],
                ),
                Container(
                  margin: const EdgeInsets.only(top: Sizes.default10, bottom: Sizes.default30),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text('10', style: style),
                      Text('￥3,878.05', style: style),
                    ],
                  ),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text('活动订单占比', style: defaultStyle),
                    Text('活动订单收入占比', style: defaultStyle),
                  ],
                ),
                Container(
                  margin: const EdgeInsets.only(top: Sizes.default10, bottom: Sizes.default30),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text('36.13%', style: style),
                      Text('18.03%', style: style),
                    ],
                  ),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text('活动订单优惠总额', style: defaultStyle),
                    Text('活动订单客单价', style: defaultStyle),
                  ],
                ),
                Container(
                  margin: const EdgeInsets.only(top: Sizes.default10),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text('￥3,870.51', style: style),
                      Text('￥35.57', style: style),
                    ],
                  ),
                ),
              ],
            ),
          ),
          Container(
            margin: const EdgeInsets.symmetric(horizontal: Sizes.default20),
            child: ListBody(
              children: [
                Container(
                  alignment: Alignment.centerLeft,
                  margin: const EdgeInsets.only(bottom: Sizes.default8),
                  child: Text(
                    '1、活动净收入=顾客参与此活动的预计收入之和',
                    style: grey,
                  ),
                ),
                Container(
                  alignment: Alignment.centerLeft,
                  child: Text(
                    '2、活动订单客单价=活动订单营业额/活动订单笔数',
                    style: grey,
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }

  BoxDecoration boxDecoration(int index) {
    Color color = this.index == index ? ColorsUtils.rgba(255, 110, 83, 1) : Colors.transparent;
    if (index == 0) {
      return BoxDecoration(
          borderRadius: const BorderRadius.only(
              topLeft: Radius.circular(Sizes.default15),
              bottomLeft: Radius.circular(Sizes.default15)),
          color: color);
    } else if (index == types.length - 1) {
      return BoxDecoration(
          borderRadius: const BorderRadius.only(
              topRight: Radius.circular(Sizes.default15),
              bottomRight: Radius.circular(Sizes.default15)),
          color: color);
    }
    return BoxDecoration(
        border: Border(
            right: BorderSide(color: ColorsUtils.rgba(223, 87, 67, 1)),
            left: BorderSide(
              color: ColorsUtils.rgba(223, 87, 67, 1),
              width: index == 1 ? 1 : 0,
            )),
        color: color);
  }
}
